@extends('layouts.app')

@section('content')
    <div class="panel panel-default">
        <div class="panel-heading">数据备份与还原</div>
        <div class="panel-body">
            <el-row>
                <el-button type="danger" icon="el-icon-plus" size="medium" plain @click="backupNow">马上备份</el-button>
            </el-row>
            <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="lastModify"
                        label="备份日期">
                </el-table-column>
                <el-table-column
                        prop="fileName"
                        label="文件名">
                </el-table-column>
                <el-table-column
                        prop="fileSize"
                        label="文件大小">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">还原</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    layout="total,prev, pager, next"
                    :page-size="15"
                    :total="total">
            </el-pagination>
        </div>
    </div>
@endsection

@section('js')
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [],
                    page: 1,
                    total: 0,
                    loading: true,
                    dialogVisible: false
                }
            },
            mounted: function () {
                this.getData()
            },
            methods: {
                backupNow () {
                    const me = this;
                    this.$confirm('确认要马上备份当前数据库?','操作提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post("{{action('BackupController@create')}}").then(function (res) {
                            console.log(res);
                            me.getData();
                            me.$message({
                                type: 'success',
                                message: '备份成功!'
                            });
                        }).catch(function (err) {
                            console.log(err)
                        });
                    }).catch(() => {})
                },
                handleEdit(index, row) {
                    const me = this;
                    this.$confirm('还原将会覆盖当前的数据信息,确认要还原到当前数据库?','操作提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const loading = me.$loading({
                            lock: true,
                            text: '还原中,可能会花点时间处理...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        axios.post("{{action('BackupController@restore')}}",{filename: row.fileName}).then(function (res) {
                            console.log(res);
                            loading.close();
                            me.$message({
                                type: 'success',
                                message: '还原成功!'
                            });
                        }).catch(function (err) {
                            loading.close();
                            console.log(err)
                        });
                    }).catch(() => {})
                },
                handleDelete(index, row) {
                    console.log(index, row);
                    const me = this;
                    this.$confirm('确认要永久删除这个备份?','操作提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post("{{action('BackupController@del')}}",{filename: row.fileName})
                            .then(function (res) {
                                console.log(res);
                                me.$message({message: res.data.i, type: res.data.status});
                                if (res.data.r === 1000){
                                    me.getData()
                                }
                            }).catch(function (err) {
                            console.log(err)
                        });
                    }).catch(() => {});
                },

                getData: function () {
                    const me = this;
                    axios.post("{{action('BackupController@index')}}",{page:this.page})
                        .then(function (res) {
                            if (res.data.r === 1000){
                                me.total = res.data.i.total;
                                me.tableData = res.data.i.data
                            }
                            me.loading = false
                        })
                        .catch(function (error) {
                            console.log(error);
                            me.loading = false
                        })
                }
            }
        });
    </script>
@endsection
